<template>
  <div class="market-info box-bg">
    <TitleLable label="市场信息"> </TitleLable>
    <div class="nav">
      <Tabs :list="navList" :current="current" @change="change" />
    </div>
    <div class="market-content">
      <div
        class="item pointer"
        v-for="(item, index) in list"
        :key="index"
        @click="goTo"
      >
        <el-row type="flex" justify="space-between" align="middle">
          <el-row type="flex" align="middle">
            <div class="label">{{ item.label }}</div>
            <div class="yellow">{{ item.state }}</div>
          </el-row>
          <div>{{ item.date }}</div>
        </el-row>
        <div class="des">{{ item.des }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleLable from "../TitleLable/index.vue";
import Tabs from "../Tabs/index.vue";

export default {
  name: "MarketInfo",
  components: { TitleLable, Tabs },
  data() {
    return {
      current: 0,
      navList: [
        "新闻",
        "公告",
        "资本运作",
        "订单",
        "法务风险",
        "招投标",
        "历史融资",
      ],
      list: [
        {
          label: "发布机构：XXXXXXX",
          state: "财务预警",
          date: "2023-07-21",
          des: "近3年下达中央预算内投资20亿元，累计新增托位20亿个；鼓励有能力、有实力的大型企业或单位发展单位办托育以及“小而美”的家庭式托育；多地出台条例或行动方近日，一则“电线杆建在农田里”的消息引发热议。据媒体报道，有群众不断反映，南方电网广东湛江供电局在建设输电工程时，事先未经村民同意就动工修建，而且还",
        },
        {
          label: "发布机构：XXXXXXX",
          state: "财务预警",
          date: "2023-07-21",
          des: "近日，一则“电线杆建在农田里”的消息引发热议。据媒体报道，有群众不断反映，南方电网广东湛江供电局在建设输电工程时，事先未经村民同意就动工修建，而且还近日，一则“电线杆建在农田里”的消息引发热议。据媒体报道，有群众不断反映，南方电网广东湛江供电局在建设输电工程时，事先未经村民同意就动工修建，而且还",
        },
        {
          label: "发布机构：XXXXXXX",
          state: "财务预警",
          date: "2023-07-21",
          des: "近期，高铁“熊孩子”事件频出，公众对此关注度颇高。近日，著名作家苏小懒在乘坐广州至珠海的动车时，孩子安静坐着，却被乘务员两次提醒管好孩子。此后，她在近期，高铁“熊孩子”事件频出，公众对此关注度颇高。近日，著名作家苏小懒在乘坐广州至珠海的动车时，孩子安静坐着，却被乘务员两次提醒管好孩子。此后，她在",
        },
      ],
    };
  },
  methods: {
    change(val) {
      this.current = val;
    },
    goTo() {
      this.$message("进入平台：市场信息列表");
    },
  },
};
</script>

<style lang="scss" scoped>
.market-info {
  width: 500px;
  height: 371px;
  .nav {
    padding: 12px 15px 0;
  }
  .market-content {
    margin-top: 5px;
    padding: 0 20px;
    color: #d0d6df;
    line-height: 16px;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 94px;
      padding: 15px 0 12px 0;
      border-bottom: 1px solid rgba(108, 128, 151, 0.6);
      &:last-child {
        border-bottom: none;
      }
    }
    .label {
      margin-right: 20px;
      font-weight: bold;
      color: #ffffff;
    }
    .des {
      overflow: hidden;
      text-overflow: ellipsis;
      // 只要超过宽度就换行，不论中文还是英文
      word-break: break-all;
      //最多展示两行
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
}
</style>
